
<template>
  <div class = "galary-content">
    <div class = "wrapper">
        <div 
        class = "imgWrapper"
        v-for = "item of imgList[this.index][this.index]"
        :key = "item.id"
        >
            <img 
            :src = "item.imgUrl"
            @click = "handlePicturnClick">
        </div>
    </div>
    <div 
    class = "galary"
    v-show = "show">
        <swiper :options="swiperOption">
            <swiper-slide 
            :legnth = "length"
            v-for = "item of imgList[this.index][this.index]" 
            :key = "item.id">
                <div class = "galary-desc">{{parseInt(item.id)+1}}/{{length}}</div>
                <div class = "galary-img">
                    <img :src = "item.imgUrl">
                </div>
            </swiper-slide>

        </swiper>
        
        <span 
        class = "cancelBtn"
        @click = "handlePicturnBackClick"
        >X</span>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  props:['imgList'],
  name:'galaryContent',
  computed:mapState(['index']),
  data(){
      return{
          length:"",
          show:false,
          swiperOption:{
            loop:false
          }
      }
  },
  methods:{
      handlePicturnClick(){
          this.show = true
          this.length = this.imgList[this.index][this.index].length
      },
      handlePicturnBackClick(){
          this.show = false
      }
  }

}
</script>

<style lang = "stylus" scoped>
.wrapper
    background:#fff
    .imgWrapper
      width:46%
      background:#aaa
      margin:.12rem
      float:left
    .imgWrapper > img
      width:100%
.galary
  position:absolute
  top:-0.86rem
  left:0
  right:0
  bottom:0
  background:#000
  color:#fff
  .galary-desc
    text-align:center
    font-size:.3rem
    padding:1.2rem
  .galary-img
    margin-top:2rem
  .galary-img>img
    width:100%
  .swiper-pagination
    color:#fff
    bottom:7.5rem
  .cancelBtn
    font-size:.5rem
    position:relative
    left:3rem
    bottom:0rem
    color:#fff

</style>